<!---->
<template>
  <div class="manage">
    <h3>博客管理</h3>
    <div class="header">
      <h4>数据展示</h4>
      <div class="serch">
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="inp">
          <el-input v-model="title" placeholder="博客标题"></el-input>
          <el-input v-model="author" placeholder="作者"></el-input>
          <el-button type="primary" plain @click="serchBlog()"
            >搜索</el-button
          >
        </div>
      </div>
    </div>
    <div class="nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"
          ><commTab :tabdata="tableData" @handleBlog="handleBlogs"></commTab
        ></el-tab-pane>
        <el-tab-pane label="审核中" name="second"
          ><commTab :tabdata="tableData" @handleBlog="handleBlogs"></commTab
        ></el-tab-pane>
        <el-tab-pane label="未通过" name="third"
          ><commTab :tabdata="tableData" @handleBlog="handleBlogs"></commTab
        ></el-tab-pane>
        <el-tab-pane label="审核通过" name="fourth"
          ><commTab :tabdata="tableData" @handleBlog="handleBlogs"></commTab
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageData.pageCount"
        :page-size="pageData.pageSize"
        :current-page="pageData.currenPage"
        @current-change="handPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
import commTab from "@/components/tab";
// import commPage from "@/components/page.vue";
export default {
  //import引入的组件需要注入对象中才能用
  components: {
    commTab: commTab,
    // commPage: commPage,
  },
  data() {
    return {
      value1: "",
      activeName: "first",
      title: "",
      author: "",
      tableData: [],
      postData: {
        createTime: "all",
        blogTitle: "all",
        author: "all",
        pageNo: 1,
        pageSize: 5,
        status: 3,
      },
      pageData: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      if (tab.index == "0") {
        this.postData.status = 3;
        this.postData.pageNo = 1;
        this.getList(this.postData);
      } else if (tab.index == "1") {
        this.postData.status = 2;
        this.postData.pageNo = 1;
        this.getList(this.postData);
      } else if (tab.index == "2") {
        this.postData.status = 0;
        this.postData.pageNo = 1;
        this.getList(this.postData);
      } else {
        this.postData.status = 1;
        this.postData.pageNo = 1;
        this.getList(this.postData);
      }
      console.log(tab, event);
    },
    //获取列表
    getList(item) {
      this.API.getBlogList(item).then((res) => {
        if (res.message.code == 200) {
          this.tableData = res.data.pageData || [];
          const { currenPage, hasNext, hasPre, pageCount, pageSize } = res.data;
          this.pageData.currenPage = currenPage;
          this.pageData.hasNext = hasNext;
          this.pageData.hasPre = hasPre;
          this.pageData.pageCount = pageCount;
          this.pageData.pageSize = pageSize;
          console.log("获取列表成功");
        } else {
          console.log("获取列表失败");
        }
      });
    },
    handPage(value) {
      console.log("分页", value);
      this.postData.pageNo = value;
      this.getList(this.postData);
    },
    //模糊搜索分类
    serchBlog() {
      if (this.author) {
        this.postData.author = this.author;
      }
      if (this.value1) {
        this.postData.createTime = this.value1;
      }
      if (this.title) {
        this.postData.blogTitle = this.title;
      }
      this.getList(this.postData);
    },
    handleBlogs() {
      this.getList(this.postData);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {
    this.getList(this.postData);
  },
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.page{
    margin-top:20px;
    text-align: center;
}
.manage {
  overflow-x: auto;
  margin: 20px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fff;
  height: 100%;
  h3,
  h4 {
    text-align: left;
  }
  h4 {
    color: rgb(64, 158, 255);
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .serch {
      display: flex;
      .inp {
        display: flex;
        .el-input {
          margin-left: 10px;
          width: 120px;
        }
      }
    }
  }
}
.el-date-editor.el-input {
  width: 150px;
}
.el-button {
  padding: 12px 30px;
  margin-left: 10px;
}
</style>